Updates to the Doctor Appointment booking page #515 #619

abhisek2004 · 2024-10-22T18:05:55Z

Hi Project Admin,

I hope you're doing well! 😊 I’m excited to submit a new pull request for our project.

Key Updates:

I have made significant updates to the Doctor Appointment booking page, including:

Responsive Design: Enhanced layout for various screen sizes.
Background Image Rotation: Background images now change automatically every 20 seconds.
Form Validation: Comprehensive validation for all form fields:
- Full Name: Required field.
- Mobile Number: Must be a valid 10-digit Indian number (only digits allowed).
- Email Address: Valid email format enforced.
- Address: Required field.
- Appointment Date: Restricts selection to future dates only, limited to 10 days ahead.
- Time Slot, Specialty, Hospital, and Doctor: Required selections.
Scrolling Feature: Added a scrolling feature for the form to enhance usability.
Styling Enhancements: Improved CSS for a visually appealing and user-friendly interface.
JavaScript Enhancements: Used jQuery for smooth validation and dynamic data fetching.

Motivation:

These updates aim to improve the user experience, ensure data integrity, and enhance the overall functionality and aesthetics of the application.

Dependencies:

If any additional dependencies are required for this change, please let me know, and I can add them.

Here’s the code I added to the booking page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doctor Appointment</title>
    <link rel="stylesheet" href="Appointment.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
            background: url('./img/appintment.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            transition: background-image 1s ease-in-out;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            height: 80vh;
            overflow-y: auto;
        }

        h1, h2 {
            text-align: center;
            color: #333;
        }

        .form-head {
            margin-bottom: 20px;
        }

        .form-body {
            padding: 20px;
        }

        .mb-3 {
            margin-bottom: 15px;
        }

        .form-label {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }

        .btn {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #218838;
        }

        .alert {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
        }

        .row {
            display: flex;
            justify-content: center;
        }

        @media (max-width: 600px) {
            .col-md-8 {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Book Your Doctor's Appointment</h1>

        <!-- Appointment Form -->
        <div class="appointment">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="form-data">
                        <div class="form-head"></div>
                        <div class="form-body">
                            <form id="appointmentForm" method="post" action="/appointment">
                                <!-- Full Name Input -->
                                <div class="mb-3">
                                    <label for="nameInput" class="form-label">Full Name</label>
                                    <input type="text" id="nameInput" placeholder="Enter Full Name" name="name"
                                           class="form-control" required />
                                </div>

                                <!-- Mobile Number Input -->
                                <div class="mb-3">
                                    <label for="numberInput" class="form-label">Mobile Number</label>
                                    <input type="text" id="numberInput" placeholder="Enter Mobile Number"
                                           name="number" class="form-control" required />
                                </div>

                                <!-- Email Address Input -->
                                <div class="mb-3">
                                    <label for="emailInput" class="form-label">Email Address</label>
                                    <input type="email" id="emailInput" placeholder="Enter Email Address"
                                           name="email" class="form-control" required />
                                </div>

                                <!-- Address Input -->
                                <div class="mb-3">
                                    <label for="addressInput" class="form-label">Address</label>
                                    <input type="text" id="addressInput" placeholder="Enter Your Address"
                                           name="address" class="form-control" required />
                                </div>

                                <!-- Appointment Date Input -->
                                <div class="mb-3">
                                    <label for="dateInput" class="form-label">Appointment Date</label>
                                    <input type="date" id="dateInput" name="date" class="form-control" required />
                                </div>

                                <!-- Time Slot Selection -->
                                <div class="mb-3">
                                    <label for="timeSlot">Select Time Slot:</label>
                                    <select id="timeSlot" name="timeSlot" class="form-control" required>
                                        <option value="" disabled selected>Select a time slot</option>
                                        <option value="08:00 - 09:00">08:00 - 09:00</option>
                                        <option value="09:00 - 10:00">09:00 - 10:00</option>
                                        <option value="10:00 - 11:00">10:00 - 11:00</option>
                                        <option value="11:00 - 12:00">11:00 - 12:00</option>
                                        <option value="12:00 - 13:00">12:00 - 13:00</option>
                                        <option value="13:00 - 14:00">13:00 - 14:00</option>
                                        <option value="14:00 - 15:00">14:00 - 15:00</option>
                                        <option value="15:00 - 16:00">15:00 - 16:00</option>
                                        <option value="16:00 - 17:00">16:00 - 17:00</option>
                                        <option value="17:00 - 18:00">17:00 - 18:00</option>
                                        <option value="18:00 - 19:00">18:00 - 19:00</option>
                                        <option value="19:00 - 20:00">19:00 - 20:00</option>
                                    </select>
                                </div>

                                <!-- Specialty Selection -->
                                <div class="mb-3">
                                    <label for="diseaseInput">Select Specialty:</label>
                                    <select id="diseaseInput" name="diseaseInput" class="form-control" required>
                                        <option value="" disabled selected>Select an option</option>
                                        <option value="Medicine">Medicine</option>
                                        <option value="Orthopedic">Orthopedic</option>
                                        <option value="Mental_health">Mental Health</option>
                                        <option value="Cardiology">Cardiology</option>
                                        <option value="Neurology">Neurology</option>
                                        <option value="Gastroenterology">Gastroenterology</option>
                                        <option value="Endocrinology">Endocrinology</option>
                                        <option value="Dermatology">Dermatology</option>
                                        <option value="Pediatrics">Pediatrics</option>
                                        <option value="Oncology">Oncology</option>
                                        <option value="Ophthalmology">Ophthalmology</option>
                                        <option value="Otolaryngology">Otolaryngology (ENT)</option>
                                        <option value="Pulmonology">Pulmonology</option>
                                        <option value="Urology">Urology</option

>
                                        <option value="Nephrology">Nephrology</option>
                                        <option value="Radiology">Radiology</option>
                                        <option value="Pathology">Pathology</option>
                                        <option value="Surgery">Surgery</option>
                                        <option value="Plastic_Surgery">Plastic Surgery</option>
                                        <option value="Emergency_Medicine">Emergency Medicine</option>
                                        <option value="Infectious_Diseases">Infectious Diseases</option>
                                        <option value="Hematology">Hematology</option>
                                    </select>
                                </div>

                                <!-- Hospital Selection -->
                                <div class="mb-3">
                                    <label for="hospital" class="form-label">Select Hospital</label>
                                    <select id="hospital" name="hospital" class="form-control" required>
                                        <option value="" disabled selected>Select Hospital</option>
                                        {% for hospital in hospitals %}
                                        <option value="{{ hospital }}">{{ hospital }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <!-- Doctor Selection -->
                                <div class="mb-3">
                                    <label for="doctor" class="form-label">Select Doctor</label>
                                    <select id="doctor" name="doctor" class="form-control" required>
                                        <option value="" disabled selected>Select Doctor</option>
                                        {% for doctor in doctors %}
                                        <option value="{{ doctor }}">{{ doctor }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <!-- Submit Button -->
                                <div class="mb-3 text-center">
                                    <button type="submit" class="btn">Book Appointment</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            // Validate mobile number
            $('#appointmentForm').on('submit', function (e) {
                const mobileNumber = $('#numberInput').val();
                if (!/^\d{10}$/.test(mobileNumber)) {
                    alert('Please enter a valid 10-digit mobile number.');
                    e.preventDefault();
                }

                // Restrict appointment date to future dates only
                const today = new Date();
                const maxDate = new Date();
                maxDate.setDate(today.getDate() + 10);
                $('#dateInput').attr('min', today.toISOString().split('T')[0]);
                $('#dateInput').attr('max', maxDate.toISOString().split('T')[0]);
            });
        });
    </script>
</body>

</html>

My work screenshot ------

Please review the pull request and let me know if everything looks good. I'm looking forward to your feedback! 👍

Thank you for your support!

Best regards,
Abhisek Panda

Please take a moment to review the changes, and let me know if everything looks good. I appreciate your support and feedback!

…cal_Website

abhisek2004 · 2024-10-22T18:25:58Z

@tushargupta1504

Hi Project Admin,

I hope you're doing well! 😊

I’m writing to request your review and acceptance of the new pull request that includes the initial creation of the Blood Bank page for our medical website. Below is a brief overview of what I’ve accomplished so far:

Key Updates:

Landing Page: Developed a visually appealing landing page for Swasthya Point Blood Bank, featuring an engaging header and informative sections.
Donor Registration: Created a form for users to register as blood donors, capturing essential details such as name, email, phone number, and blood group.
Donor Login: Implemented a section for registered donors to log in to their accounts.
Responsive Design: Ensured the page is optimized for various devices, enhancing user accessibility.

Next Steps:

I will continue to work on enhancing this page with more features and updates in the coming days.

Attached Code:

Here’s the code for the Blood Bank page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="A Online Blood bank by sigma NGO, Abhijeet Sharma">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <meta name="theme-color" content="#d2190b">
    <link rel="icon" href="img/favicon.png" type="image/png">
    <title> Swasthya Point Blood Bank </title>
    <link rel="stylesheet" href="../static/css/blood_w3.css">
    <link rel="stylesheet" href="../static/css/blood_app.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        /* Additional CSS styles */
    </style>
</head>

<body oncontextmenu="return false">
    <!-- Navbar -->
    <div class="w3-top">
        <!-- Navbar content -->
    </div>

    <!-- Header -->
    <header class="w3-container w3-red w3-center" style="padding:128px 16px">
        <h1 class="w3-margin w3-jumbo">Swasthya Point Blood Bank <i class="w3-animate-fading fa fa-heartbeat" style="animation-duration: 1.8s;"></i></h1>
        <h3>Govt of Delhi</h3>
        <a href="#register" class="get-started w3-button w3-black w3-padding-large w3-large w3-margin-top">
            <i class="fa fa-medkit"></i> Get Started
        </a>
    </header>

    <!-- Main Content -->
    <div class="w3-row w3-white w3-padding-large" id="register">
        <div class="w3-col s12 m12 l8" style="padding-top:20px;">
            <form class="w3-container w3-card-4 w3-white w3-margin" style="border-radius: 8px; border:1px solid black;">
                <h2 class="w3-center w3-text-black"><i class="fa fa-edit"></i> Donor Registration</h2>
                <div class="w3-row-padding">
                    <h4>Full Name *</h4><input class="w3-input w3-light-grey w3-border" type="text">
                    <h4>Email *</h4><input class="w3-input w3-light-grey w3-border" type="email">
                    <h4>Phone *</h4><input class="w3-input w3-light-grey w3-border" type="number">
                    <h4>Choose Blood Group *</h4>
                    <select class="w3-select w3-border w3-light-grey" name="bloodgroup">
                        <option value="A+">A+</option>
                        <option value="A-">A-</option>
                        <option value="B+">B+</option>
                        <option value="B-">B-</option>
                        <option value="AB+">AB+</option>
                        <option value="AB-">AB-</option>
                        <option value="O+">O+</option>
                        <option value="O-">O-</option>
                    </select>
                    <button class="w3-button w3-blue w3-hover-black" type="button">Register</button>
                </div>
            </form>
        </div>

        <div class="w3-col s12 m12 l4" style="padding-top: 20px">
            <form class="w3-container w3-margin w3-card-4 w3-light-grey" style="border-radius: 8px; border:1px solid black; max-width: 415px">
                <h2 class="w3-center w3-text-black"><i class="fa fa-user-circle"></i> Donor Login</h2>
                <h4>Username</h4><input class="w3-input w3-white w3-border" type="text">
                <h4>Password</h4><input class="w3-input w3-white w3-border" type="password"><br>
                <button class="w3-button w3-black w3-hover-red" type="button">Login</button><br><br>
            </form>
        </div>
    </div>

    <script>
        // JavaScript functions for dynamic features
    </script>
</body>

</html>

My work Screen shot -----

Please let me know if you have any questions or feedback. I appreciate your support!
Best regards,
Abhisek Panda

tushargupta1504 · 2024-11-10T12:42:33Z

abhisek2004 added 10 commits October 7, 2024 19:25

index file navbar update

7a0fad9

Merge branch 'main' of https://github.com/abhisek2004/girlscript_Medi…

cda56b5

…cal_Website

Reset Password created

4645438

user login pages changes

b61b2cf

Merge branch 'tushargupta1504:main' into main

fa38656

Merge branch 'main' of https://github.com/abhisek2004/girlscript_Medi…

7e24c13

…cal_Website

Updates made to the Doctor Appointment booking page

2735f2f

Added a Blood Bank page to our medical website

cc93866

I have added a Blood Bank page to our medical website

1511dc7

Merge branch 'main' into main

5b94c59

abhisek2004 closed this Oct 22, 2024

abhisek2004 added 2 commits October 22, 2024 23:49

add the button in nav bar in index page of bloodbank

250e753

Merge branch 'main' of https://github.com/abhisek2004/girlscript_Medi…

f53c8f1

…cal_Website

abhisek2004 reopened this Oct 22, 2024

tushargupta1504 closed this Nov 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updates to the Doctor Appointment booking page #515 #619

Updates to the Doctor Appointment booking page #515 #619

abhisek2004 commented Oct 22, 2024

abhisek2004 commented Oct 22, 2024 •

edited

Loading

tushargupta1504 commented Nov 10, 2024

Updates to the Doctor Appointment booking page #515 #619

Updates to the Doctor Appointment booking page #515 #619

Conversation

abhisek2004 commented Oct 22, 2024

Key Updates:

Motivation:

Dependencies:

abhisek2004 commented Oct 22, 2024 • edited Loading

Key Updates:

Next Steps:

Attached Code:

tushargupta1504 commented Nov 10, 2024

abhisek2004 commented Oct 22, 2024 •

edited

Loading